﻿@model MvcApplication.ViewModels.ChartsViewModel

@using MvcApplication.ViewModels;
@using CodeAbility.MonitorAndCommand.Models; 

@{
    ViewBag.Title = "Charts";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head {


}

<style type="text/css">
    .title {
         font-weight: bolder;
    }
</style>

<div style="width: 800px; margin: auto;">

    @if (Model.ChartSpan != CodeAbility.MonitorAndCommand.Repository.Average.ChartSpans.Last48Hours)
    {
        <a href="/Chart/">Last 48 hours</a>
    }
    else
    {
        <span class="title">@Model.Title</span>
    }

    @if (Model.ChartSpan != CodeAbility.MonitorAndCommand.Repository.Average.ChartSpans.Last7Days)
    {
        <a href="/Chart/Last7Days">Last 7 days</a>
    }
    else
    {
        <span class="title">@Model.Title</span>
    }

    @if (Model.ChartSpan != CodeAbility.MonitorAndCommand.Repository.Average.ChartSpans.Last30Days)
    {
        <a href="/Chart/Last30Days">Last 30 days</a>
    }
    else
    {
        <span class="title">@Model.Title</span>
    }

    @if (Model.ChartSpan != CodeAbility.MonitorAndCommand.Repository.Average.ChartSpans.Last3Monthes)
    {
        <a href="/Chart/Last3Monthes">Last 3 monthes</a>
    }
    else
    {
        <span class="title">@Model.Title</span>
    }

    @if (Model.ChartSpan != CodeAbility.MonitorAndCommand.Repository.Average.ChartSpans.LastYear)
    {
        <a href="/Chart/LastYear">Last year</a>
    }
    else
    {
        <span class="title">@Model.Title</span>
    }

</div>

<div id="Temperature" style="width: 1000px; height: 300px; margin: auto;"></div>
<div class="temperaturelegend" style="width: 1000px; margin: auto; text-align: center;"></div>
<div id="Humidity" style="width: 1000px; height: 300px; margin: auto;"></div>
<div class="humiditylegend" style="width: 1000px; margin: auto; text-align: center;"></div>

@{
    string temperatureJsonString = String.Format("[{0},{1},{2}]", Model.PhotonATemperatureViewModel.BuildJsonArray(), Model.PhotonBTemperatureViewModel.BuildJsonArray(), Model.PhotonCTemperatureViewModel.BuildJsonArray());
    string humidityJsonString = String.Format("[{0},{1},{2}]", Model.PhotonAHumidityViewModel.BuildJsonArray(), Model.PhotonBHumidityViewModel.BuildJsonArray(), Model.PhotonCHumidityViewModel.BuildJsonArray());
}

<script type="text/javascript">

    //Temperature
    temperature = JSON.parse('@Html.Raw(temperatureJsonString)');

    for (var i = 0; i < temperature.length; i++) {
        temperature[i] = MG.convert.date(temperature[i], 'date', "%Y-%m-%dT%H:%M:%SZ");
    }

    MG.data_graphic({
        //title: "Temperature",
        //description: "This line chart contains multiple lines.",
        data: temperature,
        min_y_from_data: true,
        width: 1000,
        height: 300,
        left: 100,
        right: 0,
        bottom: 50,
        target: '#Temperature',
        legend: ['Photon A','Photon B','Photon C'],
        legend_target: '.temperaturelegend',
        y_label: 'Temperature (c°)',
        baselines: [{ value: 19, label: '19c°' }],
    });

    //Humidity
    humidity = JSON.parse('@Html.Raw(humidityJsonString)');

    for (var i = 0; i < humidity.length; i++) {
        humidity[i] = MG.convert.date(humidity[i], 'date', "%Y-%m-%dT%H:%M:%SZ");
    }

    MG.data_graphic({
        //title: "Humidity",
        //description: "This line chart contains multiple lines.",
        data: humidity,
        min_y_from_data: true,
        width: 1000,
        height: 300,
        left: 100,
        right: 0,
        bottom: 50,
        target: '#Humidity',
        legend: ['Photon A', 'Photon B', 'Photon C'],
        legend_target: '.humiditylegend',
        y_label: 'Humidity (%)',
        baselines: [{ value: 35, label: 'Low' }, { value: 55, label: '55%' }, { value: 65, label: 'High' }],
    });

</script>




